/*
 * @Description:通用面板标题行，包括标题，操作
 * @Author: Rfan
 * @Date: 2022-05-31 15:25:56
 * @LastEditTime: 2022-06-05 10:13:23
 */

import { useMemo, useState } from 'react';
import { Button, Divider, Space } from 'antd';
import classNames from 'classnames/bind';
import { useArchiveClassifyContext } from '../contexts/ArchiveClassifyContext';
import AddItemDialog from './dialogs/AddItemDialog';

import styles from '../styles/classifyDetail.module.scss';

const cx = classNames.bind(styles);

const PaneOperate = () => {
  const { selectVerId, selectItems, deleteClassifyFunc } = useArchiveClassifyContext();

  // 父节点ID
  const [data, setData] = useState<{ pid?: number }>({});
  // 添加弹窗展示状态
  const [addDialogVisible, setAddDialogVisible] = useState(false);

  const showDialog = () => {
    setData({});
    setAddDialogVisible(true);
  };

  const addSubItem = (pid: number) => {
    setData({ pid });
    setAddDialogVisible(true);
  };

  return (
    <>
      <div className={cx('classify-detail-header')}>
        <div className={cx('title')}>分类列表</div>
        <div className={cx('operate')}>
          <Space>
            <Button disabled={!selectVerId} onClick={showDialog}>
              新建分类
            </Button>
            <Button
              disabled={selectItems.length !== 1}
              onClick={() => {
                addSubItem(selectItems[0]);
              }}
            >
              新建子分类
            </Button>
            <Button
              disabled={selectItems.length <= 0}
              danger
              onClick={() => {
                deleteClassifyFunc(selectItems, '是否删除选中的分类');
              }}
            >
              删除分类
            </Button>
            <Divider type="vertical" />
            <Button disabled>筛选检索</Button>
          </Space>
        </div>
      </div>
      {useMemo(
        () => (
          <AddItemDialog
            visible={addDialogVisible}
            data={data}
            onClose={() => {
              setAddDialogVisible(false);
            }}
          />
        ),
        [addDialogVisible]
      )}
    </>
  );
};

export default PaneOperate;
